<template>
  <div class="shareSpace">
    <div class="shareSpace-content">
      <!-- <h2 style="margin-bottom: 100px">为尔倾心向你分享了空间</h2> -->
      <n-card>
        <template #cover>
          <img :src="'api/' + spaceData.space_image">
        </template>
        <div class="card_avatar">
          <div style="font-size: 15px;">{{ spaceData.username }}</div>
          <n-avatar
            round
            size="large"
            :src="'/api/' + spaceData.avatar as string"
          />
        </div>
        <div class="card_space">
          <div style="font-size: 22px;font-weight: 700;">
            {{ spaceData.space_name }}
          </div>
          <div style="margin-top: 5px;">
            {{ spaceData.space_description }}
          </div>
        </div>
      </n-card>
      <n-button type="primary" size="large" round style="width: 100%;" @click="JoinSpace">
        加入空间
      </n-button>
    </div>
  </div>
</template>

<script setup lang='ts'>
import {CheckShareSpace, joinSpace} from "../../api/space"
import {ref, onMounted} from "vue"
import {useRouter} from 'vue-router'
const router = useRouter()

const spaceData = ref<any>({})

const JoinSpace = async() => {
  if(localStorage.getItem("token")){
    const res_data = await joinSpace({
      space_id: spaceData.value.space_id,
      phone: localStorage.getItem("token")
    })
    if(res_data.code === "200"){
      window.$message.success(res_data.message)
    }else{
      window.$message.warning(res_data.message)
    }
    router.push(`/home/spaceHome/${spaceData.value.space_id}`)
  }else{
    window.$message.warning("请先登录")
    router.push("/login")
  }
}

onMounted(async() => {
  let query = router.currentRoute.value.query
  const res_data = await CheckShareSpace({
    space_id: query.space_id,
    share_code: query.share_code
  })
  if(res_data.code === "200"){
    spaceData.value = res_data.spaceData
    console.log(spaceData.value);
  }else{
    window.$message.warning(res_data.message)
    router.push("/error")
  }
})
  
</script>

<style lang='scss' scoped>
.shareSpace{
  width: 100wh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .shareSpace-content{
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    .n-card {
      max-width: 400px;
      margin-bottom: 40px;
    }
    .card_avatar{
      padding: 15px 0 0 0;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .card_space{
      padding: 10px 0 0 0;
      box-sizing: border-box;
    }
  }
}
</style>